/*
 * @Author: lusx 
 * @Date: 2020-05-22 16:48:25 
 * @Last Modified by: lusx
 * @Last Modified time: 2020-05-26 15:35:45
 */
import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { ListPage } from 'weaver-mobile-page';
import Chart from './chart'
import MyListPage from '../../../main/pages/mainListPage'
const Normal = ListPage.Normal;
@inject('singleListStore', 'mainStore')
@observer
export default class Status extends React.Component {
    componentWillMount() {
        const { singleListStore: { init }, match: { url, params: { quicktype } } } = this.props;
        const params = { route: `${url}/status`, quicktype, type: 3, searchConfig: 0 };
        init(params);
    }
    render() {
        const { mainStore: { actionSheetStore: { getActionBtn } }, singleListStore: { pies, list } } = this.props;
        const datas = [{ option: this.templateFun() }];
        const provider = { getActionBtn };
        return (
            <div className='gv-status'>
                {/* <NewSearch /> */}
                <MyListPage listViewStore={list} provider={provider} hasBtns={false} />
                {toJS(pies).length > 0 && <Chart datas={datas} />}
            </div>
        )
    }
    templateFun() {
        const { pies, title } = this.props.singleListStore;
        const option = {
            title: {
                text: title,
                subtext: '',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                top: 'middle',
                right: document.clientWidth / 7,
                data: []
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: toJS(pies),
                    label: {
                        normal: {
                            formatter: '{b|{b}：}{per|{d}%}  ',
                            borderRadius: 4,
                            rich: {
                                b: {
                                    fontSize: 12,
                                    lineHeight: 20
                                },
                                per: {
                                    fontSize: 12,
                                    borderRadius: 2
                                }
                            }
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        return option;
    }
}